<template>
  <el-tabs class="mt-6">
    <el-tab-pane>
      <template #label>
        <el-button class="tabs-button">
          信号
        </el-button>
      </template>
      <el-table
        class="ml-2"
        border
        :height="240"
        :data="tableList"
      >
        <el-table-column
          label="序号"
          type="index"
          width="60"
          align="center"
        />
        <el-table-column
          label="中心频率"
          prop="centerFreIn"
          width="200"
          align="center"
        >
          <template #default="{ row }">
            {{ numToPlot(row.centerFreIn) }}
          </template>
        </el-table-column>
        <el-table-column label="带宽" prop="bandWidth" align="center">
          <template #default="{ row }">
            {{ numToPlot(row.bandWidth) }}
          </template>
        </el-table-column>
        <el-table-column label="实时(dBuv)" prop="current" align="center" />
        <el-table-column label="最大(dBuv)" prop="max" align="center" />
        <el-table-column label="最小(dBuv)" prop="min" align="center" />
        <el-table-column label="首次发现时间" prop="firstTime" align="center" />
        <el-table-column label="最新更新时间" prop="lastTime" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button class="cover" size="small" @click="pick(row)">监测</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="scantabs">
        <div
          v-for="(item, index) in spectrumList"
          :key="item.title"
          :class="{ 'active' : activeKey === index }"
          class="st-item"
          @click="tabClick(index)"
        >
          {{ item.title }}
        </div>
      </div>  
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <el-button class="tabs-button">
          采集
        </el-button>
      </template>
      <Gather />
    </el-tab-pane>
    <el-tab-pane lazy>
      <template #label>
        <el-button class="tabs-button">
          回放
        </el-button>
      </template>
      <Playback />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup name="BottomSignalTabs">
import { numToPlot } from '@/utils/utils';
import Gather from './Gather.vue'
import Playback from './Playback.vue'
import useScanStore from '@/store/modules/scanMonitor';
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  signalList: {
    type: Array,
    default: () => []
  }
})
const activeKey = ref(0)
const { spectrum } = useScanStore()
const spectrumList = computed(() => {
  const signalList = props.signalList
  const len = signalList.length
  signalList.sort((a,b) => a.centerFreIn - b.centerFreIn)
  const itemNum = Math.ceil(signalList.length / spectrum.freNum)
  const list = []
  let temp = []
  for (let i = 0; i < len; i++) {
    temp.push(signalList[i])
    if (temp.length === itemNum || i === len -1) {
      const start = temp[0]
      const end = temp[temp.length - 1]
      const title = generateTabTitle(start, end)
      list.push({ title, body: temp })
      temp = []
    }
  }
  return list
})
const tableList = computed(() => {
  return spectrumList.value[activeKey.value]?.body || []
})
const generateTabTitle = (start, end) => {
  const diff = end.centerFreIn - start.centerFreIn
  return `${numToPlot(start.centerFreIn, '', 0)} - ${numToPlot(end.centerFreIn, '' , 0)}(${numToPlot(diff, '' , 1)})`
}
const tabClick = (index) => {
  activeKey.value = index
}
//Add by xf at 2023-12-05
const pick = () => {
  router.push({
    name: 'SignalMonitor',
  })
}
</script>